<template>
  <div style="padding-top: 20px;" class="imgCol">
    <el-card style="width:500px;height:600px">
      <el-scrollbar style="height:600px">
        <el-steps :active="activeStep" align-center>
          <el-step title="填写基本信息"></el-step>
          <el-step title="前往邮箱激活"></el-step>
          <el-step title="完善机构资料"></el-step>
        </el-steps>
        <div style="margin-top:40px" class="imgCol">
          <div style="width:400px">
            <el-form :model="form" status-icon :rules="rules" ref="form">
              <el-form-item prop="logo" label="企业logo" label-width="100px">
                <el-row>
                  <el-upload
                    class="qiYeLogo"
                    :before-upload="beforeAvatarUpload"
                   
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :http-request="handleLogoSucess"
                  >
                    <img v-if="form.logo" :src="form.logo" class="qiYeLogo" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-row>
              </el-form-item>
              <div style="margin-bottom:20px">
                <el-alert title="企业LOGO将作为您的头像" type="info" :closable="false"></el-alert>
              </div>
              <el-form-item prop="allName" label="企业全称" label-width="100px">
                <el-input placeholder="请填写企业全称" v-model="form.allName"></el-input>
              </el-form-item>
              <el-form-item prop="shortName" label="企业简称" label-width="100px">
                <el-input placeholder="请填写企业简称（5个字符以内）" v-model="form.shortName"></el-input>
              </el-form-item>
              <!-- <el-form-item prop="type" label="企业类型" label-width="100px">
                                    <el-select  v-model="form.type" placeholder="请选择">
                                            <el-option
                                                v-for="item in types"
                                                :key="item"
                                                :label="types[item]"
                                                :value="item">
                                            </el-option>
                                    </el-select>
                                    </el-form-item>
                                    <el-form-item  prop="industry" label="所属行业" label-width="100px">
                                        <el-select  v-model="form.industry" placeholder="请选择">
                                            <el-option
                                                v-for="item in industrys"
                                                :key="item"
                                                :label="industrys[item]"
                                                :value="item">
                                            </el-option>
                                    </el-select>
              </el-form-item>-->
              <el-form-item prop="birthday" label="成立时间" label-width="100px">
                <el-date-picker
                  :picker-options="pickerOptions"
                  v-model="form.birthday"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  @change="checkDate"
                ></el-date-picker>
              </el-form-item>
              <!-- <el-form-item  prop="scale" label="企业规模" label-width="100px">
                                    <el-input-number v-model="form.scale"  :min="1"></el-input-number>
              </el-form-item>-->
              <el-form-item prop="area" label="所在地区" label-width="100px">
                <el-cascader v-model="form.pca" :options="regionDataPlus" @change="pcaChange"></el-cascader>
              </el-form-item>
              <el-form-item prop="address" label="详细地址" label-width="100px">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请填写准确地址，便于系统导航至您的企业"
                  v-model="form.address"
                ></el-input>
              </el-form-item>
              <el-form-item prop="contact" label="联系方式" label-width="100px">
                <el-input placeholder="请输入联系方式" v-model="form.contact"></el-input>
              </el-form-item>
              <el-form-item prop="intro" label="企业简介" label-width="100px">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请填写企业简介（主要业务、愿景等；字数控制在30-200字内）"
                  v-model="form.intro"
                ></el-input>
              </el-form-item>
              <el-form-item prop="qiYePic1" label="企业照片" label-width="100px">
                <el-row style="position:static">
                  <el-upload
                    class="qiYeLogo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :http-request="handlePics1Sucess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="form.qiYePic1" :src="form.qiYePic1" class="qiYeLogo" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div style="position:absolute;top:0px;left:90px">
                    <el-upload
                      class="qiYeLogo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                       
                      :http-request="handlePics2Sucess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="form.qiYePic2" :src="form.qiYePic2" class="qiYeLogo" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                  <div style="position:absolute;top:0px;left:180px">
                    <el-upload
                      class="qiYeLogo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      
                      :http-request="handlePics3Sucess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="form.qiYePic3" :src="form.qiYePic3" class="qiYeLogo" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </el-row>
              </el-form-item>
            </el-form>
            <div style="margin-top:0px;margin-bottom:20px">
              <el-alert title="请上传1~3张企业外景图片" type="info" :closable="false"></el-alert>
            </div>
            <el-row style="margin-bottom:20px">
              <button class="btnSubmit pointer" @click="submitAll" style="width:400px">完成</button>
            </el-row>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>
<script>
import {
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  data() {
    //校验简称
    var validateShortName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入企业简称"));
      } else if (value.length > 5) {
        console.log(value);
        callback(new Error("请将企业简称控制在5个字符以内"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      var pattern = /^1[34578]\d{9}$/;
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (value.length !== 11 || !pattern.test(value)) {
        callback(new Error("手机格式不正确"));
      } else {
        callback();
      }
    };
    var validateIntro = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入企业简介"));
      } else if (value.length < 30) {
        callback(new Error("企业简介字数<30,请控制在30字到200字内"));
      } else if (value.length > 200) {
        callback(new Error("企业简介字数>200,请控制在30字到200字内"));
      } else {
        callback();
      }
    };
    return {
      activeStep: 3,
      form: {
        logo: "",
        logoFile: "",
        allName: "",
        shortName: "",
        type: "",
        industry: "",
        birthday: "",
        scale: 10,
        province: "",
        city: "",
        area: "",
        //省市区
        pca: "",
        address: "",
        contact: "",
        intro: "",
        dialogVisible: false,
        qiYePic1: "",
        qiYePic2: "",
        qiYePic3: "",
        qiYePics: []
      },
      rules: {
        logo: [
          {
            required: true,
            message: "请上传logo",
            trigger: "blur"
          }
        ],
        allName: [
          {
            required: true,
            message: "请输入企业全称",
            trigger: "blur"
          }
        ],
        shortName: [
          {
               required: true,message: '请输入企业简称', trigger: 'blur'
          },
          {
            validator: validateShortName,
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择企业类型",
            trigger: "blur"
          }
        ],
        industry: [
          {
            required: true,
            message: "请选择企业行业",
            trigger: "blur"
          }
        ],
        birthday: [
          {
            required: true,
            message: "请选择成立时间",
            trigger: "blur"
          }
        ],
        scale: [
          {
            required: true,
            message: "请输入企业规模",
            trigger: "blur"
          }
        ],
        area: [
          {
            required: true,
            message: "请选择所在地区",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur"
          }
        ],
        contact: [
          {
               required: true,message: '请输入联系方式', trigger: 'blur'
          },
          {
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        intro: [
          {
            required: true,
            message: "请输入企业简介",
            trigger: "blur"
          },
          {
            validator: validateIntro,
            trigger: "blur"
          }
        ],
        qiYePic1: [
          {
            required: true,
            message: "请至少上传一张企业外景图片",
            trigger: "blur"
          }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          //console.log("endDatePicker:",time);
          return time.getTime() > Date.now() - 8.64e7;
        }
      },
      types: [],
      industrys: [],
      regionDataPlus: regionDataPlus
    };
  },
  watch: {},
  mounted() {
    // this.getQiYeType();
    // this.getIndustrys();
  },
  methods: {
    checkDate() {
      console.log(this.form.birthday);
    },

    //提交企业信息
    submitAll() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var size = this.form.logoFile.size / (1024 * 1024);
          this.form.qiYePics.forEach(file => {
            size += file.size / (1024 * 1024);
          });
          if (size <= 4) {
            var URL = this.IP + "/organUserInfo/createTrainOrganInfo";
            var form = new FormData();

            form.append("logo", this.form.logoFile);
            form.append("name", this.form.allName);
            form.append("shortname", this.form.shortName);
            //  form.append('nature',this.form.type);
            //  form.append('industry',this.form.industry);
            form.append("date", this.form.birthday);
            // form.append('scale',this.form.scale);
            form.append("province", this.form.province);
            form.append("city", this.form.city);
            form.append("area", this.form.area);
            form.append("address", this.form.address);
            form.append("contact", this.form.contact);
            form.append("introduction", this.form.intro);
            // form.append('pictures',this.form.qiYePics);
            var i = 0;
            for (i in this.form.qiYePics) {
              form.append("pictures", this.form.qiYePics[i]);
            }
            var params = {
              logo: this.form.logoFile,
              name: this.form.allName,
              shortname: this.form.shortName,
              //nature:this.form.type,
              //industry:this.form.industry,
              date: this.form.birthday,
              //scale:this.form.scale,
              province: this.form.province,
              city: this.form.city,
              area: this.form.area,
              address: this.form.address,
              contact: this.form.contact,
              introduction: this.form.intro,
              pictures: this.form.qiYePics
            };
            this.$message({
              type: "warning",
              message: "正在上传信息， 请耐心等待结果！"
            });
            this.$ajax({
              method: "put",
              url: URL,
              data: form,
              headers: {
                "Content-type": "multipart/form-data"
              }
            })
              .then(response => {
                console.log(response.data);
                var code = response.data.code;
                if (code == 0) {
                  this.$message({
                    message: response.data.data,
                    type: "success"
                  });
                  this.$router.push({
                    path: "/home/recent"
                  });
                } else {
                  console.log(response.data.msg);
                  this.$message.error(response.data.msg);
                }
              })
              .catch(error => {
                console.log(error);
                //Toast(error);
              });
          } else {
            this.$message({
              type: "error",
              message: "图片不能大于4M!"
            });
          }
        } else {
          console.log("error submit!!");
        }
      });
    },
    //获取企业logo的回调
    handleLogoSucess(file) {
      this.form.logo = URL.createObjectURL(file.file);
      this.form.logoFile = file.file;
      // console.log(res);
      // console.log(file);
    },
    //获取企业外景图1
    handlePics1Sucess(file) {
      this.form.qiYePic1 = URL.createObjectURL(file.file);
      this.form.qiYePics[0] = file.file;
      console.log(this.form.qiYePics);
    },
    //获取企业外景图2
    handlePics2Sucess(file) {
      this.form.qiYePic2 = URL.createObjectURL(file.file);
      this.form.qiYePics[1] = file.file;
      console.log(this.form.qiYePics);
    },
    //获取企业外景图3
    handlePics3Sucess(file) {
      this.form.qiYePic3 = URL.createObjectURL(file.file);
      this.form.qiYePics[2] = file.file;
      console.log(this.form.qiYePics);
    },
    //获取企业类型
    getQiYeType() {
      var URL = this.IP + "/company/companyTypes";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.types = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取所属行业
    getIndustrys() {
      var URL = this.IP + "/company/industry";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.industrys = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //省市区选择变化触发
    pcaChange(val) {
      console.log(val);
      var proCode = val[0];
      var cityCode = val[1];
      var areaCode = val[2];
      this.form.province = CodeToText[proCode];
      this.form.city = CodeToText[cityCode];
      this.form.area = CodeToText[areaCode];
      console.log(this.form.province);
      console.log(this.form.city);
      console.log(this.form.area);
    },
    beforeAvatarUpload(file) {
      console.log("图片大小：", file.size);
      console.log("文件类型：", file.type);
      const isJPG = file.type;
      const isLt2M = file.size / (1024 * 1024);
      if (isJPG !== "image/jpeg" && isJPG !== "image/png") {
        //非图片类型判断
        this.$message.error("上传文件类型必须是图片！");
        return false;
      }
      if (isLt2M > 4) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
        return false;
      } else if (isLt2M > 1) {
        this.$message({
          message: "图片有点大，若上传请耐心等待",
          type: "warning"
        });
        return true;
      } else {
        return true;
      }
    }
  }
};
</script>
<style>
.el-main,
.el-header,
.el-footer,
.el-aside {
  padding: 0px;
}

.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
.plainWords {
  color: rgb(105, 110, 125);
}
.pointer {
  cursor: pointer;
}
.qiYeLogo {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
  white-space: nowrap;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  white-space: nowrap;
}
/* .el-upload--picture-card{
    width: 80px;
    height: 80px;
    line-height: 80px;
  } */
.btnSubmit {
  width: 400px;
  height: 40px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-style: none;
  border-radius: 5px;
}
</style>